<template>
  <div class="main-container">
    <div class="flex">
      <div class="main-left flex-1">
        <div class="detail-title">
          {{post.title.rendered}}
        </div>
        <div class="flex my-2">
          <div class="mr-1">
            <i class="el-icon-date"></i> {{post.date}}
          </div>
          <div class="mr-1">
            <i class="el-icon-chat-dot-round"></i> {{post.articleInfor.commentCount}}
          </div>
          <div>
            <i class="el-icon-view"></i> {{post.articleInfor.viewCount}}
          </div>
        </div>
        <div class="post-detail" v-html="post.content.rendered">
        </div>
      </div>
      <div class="main-right">
        <RightIndex></RightIndex>
      </div>
    </div>
  </div>

</template>

<script>
  import {getPostDes} from "@/api/post";
  import RightIndex from "@/components/RightIndex";
  import {mapState} from 'vuex'

  export default {
    layout: 'page',
    head() {
      return {
        title: `${this.post.title.rendered} | ${this.info.blogName}`,
        link: [
          { rel: 'stylesheet', href: 'https://upyun.xuanmo.xin/css/prism.css' }
        ],
        script: [
          { src: 'https://upyun.xuanmo.xin/js/prism.js' }
        ]
      }
    },
    async asyncData({ app, params, error, store }) {
      const id = params.id
      const post = await app.$axios.$request(getPostDes(params.id))
      return {
        post
      }
    },
    computed: {
      ...mapState(['info'])
    },
    components: {
      RightIndex
    }
  }
</script>

<style lang="scss">
  .post-detail {
    img {
      width: 100% !important;
    }
  }

  .detail-title {
    color: #1f2f3d;
    font-size: 24px;
    font-weight: bolder;
  }
  .post-detail {
    width: 100%;
    max-width: 650px;
    color: #4a4a4a;

    p {
      color: #4a4a4a;
      margin-bottom: 1.5em;
      line-height: 28px;
      font-size: 14px;
    }

    h2, h3, h4, h5 {
      text-indent: 0;
      color: #1f2f3d;
      margin-bottom: 1em;
    }
    pre[class*="language-"]:before, pre[class*="language-"]:after {
      box-shadow: 0px 0px 0px #979797;
    }

    code[class*="language"] {
      padding: 1em;
    }

  }
</style>
